轮播图，图片旋转器，滑片，无论你怎么叫这玩意，它在网络上无处不在。轮播图在电商网站主页上广泛应用，大多数电商网站的主页上都有它：

网上有很多的轮播图特效，部分采用的transition属性结合JS实现滚动，但是很遗憾没有无缝效果，什么是无缝？我给前端小白画了一个示意图。另外本文是我写的第一篇文章，难免有生疏之处。包含很多知识点回顾，很适合JS新手学习。

当焦点位于图片1时，如果再往前滚的话，整个队列会被拉倒真正的第五张图。至于真正的图片1前面的副本图片5只是让用户产生视觉差，从而不会让用户明显感觉到图片被倒向了图片5，看起来就像时无缝轮播。 同理当焦点位于图片5时，如果再往后滚，道理同上不再赘述。

1.当鼠标放入容器内时左右出现控制按钮，并且轮播动画停止。 2.当鼠标移出时，控制按钮隐藏，轮播继续。 3.焦点随图片的滚动而变化。 4.跳跃点击焦点，会跳转到相应的图片。 5.以及前沿所述的无缝轮播。

（内有注释解析）

给a标签绑定点击事件，先获取list的left属性并且取出数字进行运算操作。下面我们来做一些优化，把定义一个function animate()函数，传入offset参数，并把var newLeft=parseInt(list.style.left) +offset;，然后让prev和next的点击事件调用这个函数。

然后我们会发现当我们点击到第五张图片left=-3000px时，它应该滚到真正的第1张而不是副本1。我们可以像下面这样写实现无缝滚动：